<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
    <div class="layui-fluid">
    
        <div class="nav" style="margin:10px 0;">
            <span class="layui-breadcrumb">
                <a href="/home">首页</a>
                <a><cite>分类列表</cite></a>
              </span>
        </div>
        <div class="body" style="margin:10px 0;">
            <div>
                <a href="/cateAdd" class="layui-btn layui-btn-normal">增加分类</a>
            </div>
            <table class="layui-table">
                <colgroup>
                  <col width="150">
                  <col width="200">
                  <col>
                </colgroup>
                <thead>
                  <tr>
                    <th>分类名称</th>
                    <th>分类描述</th>
                    <th>分类封面</th>
                    <th>操作</th>
                  </tr> 
                </thead>
                <tbody>
                  <% for(var i=0;i<cates.length;i++){ %>
                    <tr>
                      <td><%= cates[i].cateName %></td>
                      <td><%= cates[i].cateDesc||'暂无描述' %></td>
                      <td>
                          <img src="<%= cates[i].cateIcon||'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3865588184,3342697262&fm=26&gp=0.jpg' %>" alt="">
                      </td>
                      <td>
                          <a href="/cateEdit?cateId=<%= cates[i].id %>" class="layui-btn layui-btn-primary layui-btn-xs">编辑</a>
                          <button 
                            data-id="<%= cates[i]._id %>"
                            class="layui-btn layui-btn-danger del layui-btn-xs">删除</button>
                      </td>
                    </tr>
                  <% } %>
                  
                </tbody>
              </table>

              <div id="page"></div>
        </div>
    </div>
    <script src="/static/layui/layui.js"></script>
    <script>
        layui.use(['element','laypage','jquery','layer'],function(){
            var element = layui.element;
            var laypage = layui.laypage;
            var $ = layui.jquery;
            var layer = layui.layer;
            // 创建分页
            // 点击删除按钮
            $(".del").click(function(){
             var _this = this;
             layer.confirm('确认删除吗?', {icon: 3, title:'删除'}, function(index){
                //do something
                $.ajax({
                  url:"/cateDel",
                  type:'POST',
                  data:{
                    id:_this.dataset.id
                  },
                  success:function(res){
                    if(res.code === 0){
                      layer.msg(res.msg,{icon:1,time:1000},function(){
                        history.go(0)
                      })
                    }
                  }
                })
                layer.close(index);
              });
            })
            laypage.render({
                elem: 'page',
                count: <%= counts %>,
                limit: 2,
                curr:<%= page %>,
                jump: function(obj, first){
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数
                    console.log(first)
                    //首次不执行
                    if(!first){
                    //do something
                      location.href = `/cateList?page=${obj.curr}&pageSize=${obj.limit}`
                    }
                }
            })
        })
    </script>
</body>
</html>